<template>
  <div class="cart-summary">
    <h3>购物车摘要</h3>

    <div class="summary-item">
      <span>商品数量:</span>
      <span>{{ cartStore.totalCount }}</span>
    </div>

    <div class="summary-item">
      <span>商品总价:</span>
      <span>¥{{ cartStore.totalPrice.toFixed(2) }}</span>
    </div>

    <div class="summary-item">
      <span>运费:</span>
      <span>{{ shippingCost === 0 ? '免费' : `¥${shippingCost.toFixed(2)}` }}</span>
    </div>

    <div class="summary-divider"></div>

    <div class="summary-item total">
      <span>总计:</span>
      <span>¥{{ totalWithShipping.toFixed(2) }}</span>
    </div>

    <button @click="proceedToCheckout" :disabled="cartStore.isEmpty" class="checkout-btn">
      去结算
    </button>

    <button @click="clearCart" :disabled="cartStore.isEmpty" class="clear-cart-btn">
      清空购物车
    </button>
  </div>
</template>

<script setup lang="ts">
import { useCartStore } from '@/stores/cart'
import { computed } from 'vue'

const cartStore = useCartStore()
const shippingCost = computed(() => {
  return cartStore.totalPrice < 200 ? 0 : cartStore.totalPrice / 20
})
const totalWithShipping = computed(() => {
  return cartStore.totalPrice + shippingCost.value
})

function proceedToCheckout() {
  console.log('Proceeding to checkout...')
}

function clearCart() {
  if (confirm('确定要清空购物车吗？')) {
    cartStore.clearCart()
  }
}
</script>

<style scoped>
.cart-summary {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  height: fit-content;
}

.cart-summary h3 {
  margin: 0 0 1rem 0;
  color: #333;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.summary-item.total {
  font-weight: bold;
  font-size: 1.1rem;
  color: #e74c3c;
}

.summary-divider {
  height: 1px;
  background: #ddd;
  margin: 1rem 0;
}

.checkout-btn,
.clear-cart-btn {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  transition: background-color 0.3s;
}

.checkout-btn {
  background: #28a745;
  color: white;
}

.checkout-btn:hover:not(:disabled) {
  background: #218838;
}

.checkout-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.clear-cart-btn {
  background: #dc3545;
  color: white;
}

.clear-cart-btn:hover:not(:disabled) {
  background: #c82333;
}

.clear-cart-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>
